@extends('home.auth.base')
@section('scripts')
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    form: {
                        username: '',
                        password: '',
                        _token:"{{csrf_token()}}"
                    },
                }
            },
            methods: {
                login() {
                    let that = this;
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            $.post("{{ route('home.auth.login') }}",this.form,function(res){
                                if(res.code){
                                    that.$message.error(res.msg);
                                }else{
                                    that.$message({
                                        message: '登录成功，页面即将跳转......',
                                        type: 'success'
                                    });
                                    setTimeout(function(){
                                        window.location.href = res.data;
                                    }, 1000);
                                }
                            });
                        }
                    });
                },
                qq_login(){
                    window.location.href = "{{ route('home.qq.login') }}";
                },
                weibo_login(){
                    window.location.href = "{{ route('home.weibo.login') }}";
                }
            }
        });
    </script>
@endsection
@section('content')
    <div class="container main auth">
        <div class="row">
            <div class="col-lg-12 text-center">
                <div class="auth-form" id="app" v-cloak>
                    <div class="auth-login-menu">
                        <img style="width: 224px" src="{{ $setting['pc_logo'] }}" alt="">
                        <ul>
                            <li class="li-login"><a class="active">登录</a></li>
                            <li class="li-register"><a href="{{ route('home.auth.register') }}">注册</a></li>
                        </ul>
                    </div>
                    <el-form :model="form" ref="form" label-position="top" class="login-form">
                        <el-form-item label="手机号：" :rules="[{ required: true, message: '请填写手机号', trigger: 'blur'}]" prop="username">
                            <el-input v-model="form.username" placeholder="请填写手机号" auto-complete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="密码：" :rules="[{ required: true, message: '请填写登录密码', trigger: 'blur'}]" prop="password">
                            <el-input type="password" v-model="form.password" placeholder="请填写登录密码" auto-complete="off"></el-input>
                        </el-form-item>
                        <div class="form-tishi">
                            忘记密码？<a href="{{ route('home.auth.find') }}">立即找回</a>
                        </div>
                        <div class="form-submit">
                            <el-button type="primary" @click="login()">提 交</el-button>
                        </div>
                    </el-form>
                    <div class="form-three">
                        <p>
                            <img @click="qq_login" class="qq-img" alt="qq登录" title="qq登录" src="{{ asset('img/login_qq.png') }}" alt="">
                            <img @click="weibo_login" alt="微博登录" title="微博登录" src="{{ asset('img/login_wb.png') }}" alt="">
                        </p>
                        <p class="form-three-mote"><span></span><span>第三方快捷登录</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

